/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.s1107.com
* @Contact: QQ:2487937004
*/
<template>
	<view class="index_class">
		<view class="bus-top">
			<view class="order-filter">
				<view class="items" :class="{'order_active':showingIndex1 == 0}" @click="showOptions(0)">全部</view>
				<view class="items" :class="{'order_active':showingIndex1 == 1}" @click="showOptions(1)">待付款</view>
				<view class="items" :class="{'order_active':showingIndex1 == 2}" @click="showOptions(2)">待发货</view>
				<view class="items" :class="{'order_active':showingIndex1 == 3}" @click="showOptions(3)">待收货</view>
				<view class="items" :class="{'order_active':showingIndex1 == 4}" @click="showOptions(4)">待评价</view>
			</view>
		</view>

		<view class="all-order">
			<!--  app 端状态栏站位 -->
			<mescroll-uni top="100" style="padding-top:0!important" :up="upOption" @up="upCallback" @down="downCallback"
				@init="mescrollInit" @emptyclick="emptyClick">
				<view style="background-color:#f4f4f4">
					<view class="order_list" v-for="(item,index) in list" :key="index">
						<view class="order_top">
							<text>订单号:{{item.ordernumber}}</text>
							<view>
								<text class="color">{{item.order_zt}}</text>

								<i class="iconfont order_all_right"></i>
							</view>
						</view>
						<view class="order_bottom">
							<view class="bottom_top">
								<view>
									<i v-if="showingIndex1 == 1" @click.stop="checkpay(item.id,item.ordernumber)"
										class="iconfont" :class="[item.icon ? 'icon_e632' :'icon_e741']"></i>
									{{item.shop_name}}
								</view>
								<i class="iconfont order_all_right"></i>
							</view>
							<view class="bottom_img"
								@click="getnav('/pagesC/homeSon/orderDetails?order_num=' +item.ordernumber)"
								v-for="(shopItem,index2) in item.goodsinfo" :key="index2">
								<image :src="shopItem.thumb_url" />

								<view style="padding:0 40upx 0 20upx;flex:1">
									<view class="introduce">{{shopItem.goods_name}}</view>
									<view class="arrt-str">{{shopItem.goods_attr_str}}</view>
								</view>
								<view style="font-size:24upx; text-align: right;">
									¥{{shopItem.price}}
									<view style="text-align:right;color:#999">x{{shopItem.goods_num}}</view>
									<view class="order-all-text">
										<span
											v-if="shopItem.th_status == 1 || shopItem.th_status == 2 || shopItem.th_status == 3 ">退款中</span>
										<span v-else-if="shopItem.th_status == 4">退款已完成</span>
										<span
											v-else-if="shopItem.th_status == 5 || shopItem.th_status == 6 || shopItem.th_status == 7">换货中</span>
										<span v-else-if="shopItem.th_status == 8">换货已完成</span>
									</view>
									<view class="number_sure"
										v-if="item.filter ==4 && item.ping == 0 && shopItem.hasComment == 0">
										<span class="to_comment"
											@click.stop="getnav('/pagesB/comment/addGoodsComment?id='+item.id+'&goods_id='+shopItem.goods_id)">评价</span>
									</view>
								</view>
							</view>
						</view>
						<view class="or_number">
							<view class="number_text">
								实付金额：
								<text>¥{{item.total_price}}</text>
								<text>{{ item.total_price | currency}}</text>
								<i class="iconfont order_all_right"></i>
							</view>
							<view class="number_sure" v-if="item.filter ==1">
								<!-- <span @click="getnav('/pagesB/personalSon/Refundtype')">申请退款</span> -->

								<u-button shape="circle" plain size="mini" @click="cancellation(item.ordernumber)">取消订单
								</u-button>
								<u-button class="u-m-l-20" shape="circle" type="warning" plain size="mini"
									@click="openPay(item.ordernumber,item.total_price)">待付款</u-button>

							</view>

							<view class="number_sure" v-if="item.filter ==5 ">
								<span @click="deleteOrder(item.ordernumber)">删除订单</span>
							</view>
							<view class="number_sure" v-if="item.filter ==3 ">
								<span class="payment_order" @click="getqrshouhuo(item.ordernumber)">确认收货</span>
							</view>
							<view class="number_sure"
								v-if="item.order_type === 2 &&  item.state === 1 && item.order_status !== 2">
								<span @click="toPt(item.ordernumber)">拼团</span>
							</view>
						</view>
					</view>

					<view class="paybtn u-flex u-row-between u-col-center" v-show="numberpay">
						<p>实际总额：<span class="rmbSymbol">¥</span> <span
								style="font-size: 36upx;color:#fa3f3f">{{Number(totalPrice).toFixed(2)}}</span>
							<span>{{ Number(totalPrice).toFixed(2) | currency}}</span>
						</p>
						<u-button type="warning" style="margin:0" shape="circle" size="mini" @click="hebingpay">合并付款
						</u-button>
					</view>
				</view>
			</mescroll-uni>
		</view>

		<!--  全局共用收银台组件-->
		<pay-pop ref="payPop" :totalPrice="totalPrice">
			<div class="pay-btn" @click="$u.debounce(crosspay,1500)">确认支付</div>
		</pay-pop>


	</view>
</template>

<script>
	let zf_number = []; // 支付订单号
	let iconarr = []; // 合并支付订单号
	let orderNumber = "";
	let backindex = "";
	let payOrderNumer;
	import MescrollUni from "mescroll-uni/mescroll-uni.vue";
	import payPop from "../../components/payPop";

	export default {
		components: {
			MescrollUni,
			payPop
		},
		data() {
			return {
				showingIndex1: 6,
				list: [],
				valShow: false,
				numberpay: false, // 合并付款
				valueStatus: 0, // 更新页面状态 防止页面卡死

				mescroll: null, //mescroll实例对象
				upOption: {
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: "~暂无相关订单~", // 提示
						icon: 'https://woshop-1258844920.cos.ap-nanjing.myqcloud.com/static/images/nullStatus/noList.png'
					},
					wechatMiniProgram: 0,
				},
				totalPrice: 0,
			};
		},
		onLoad(option) {
			if (option) {
				this.showingIndex1 = option.index ? option.index : 6;
				backindex = option.backindex;
			}
			this.list = [];
			this.mescroll && this.mescroll.resetUpScroll();
			//#ifdef MP-WEIXIN
			this.wechatMiniProgram = 1;
			//#endif

		},
		onShow() {

		},

		watch: {
			valShow() {
				this.statusMath(this);
			}

		},
		onReachBottom: function() {
			this.mescroll && this.mescroll.onReachBottom();
		},
		//注册列表滚动事件,用于下拉刷新
		onPageScroll(e) {
			this.mescroll && this.mescroll.onPageScroll(e);
		},
		onBackPress() {
			if (backindex == 2) {
				uni.switchTab({
					url: "/pages/tabBar/Home"
				});
				return true;
			}
		},
		methods: {
			toPt(order_num) {
				this.getnav(`/pagesC/homeSon/fightGroup?order_num=${order_num}`);
			},

			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			// 下拉刷新的回调
			downCallback(mescroll) {
				mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
				iconarr = [] //下拉刷新重置  iconarr
				this.numberpay = false; // 重置合并付款显示状态
			},
			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			upCallback(mescroll) {
				var pageNum = mescroll.num; // 页码, 默认从1开始
				var pageSize = mescroll.size; // 页长, 默认每页10条
				this.$http
					.getMyOrder({
						filter: this.showingIndex1,
						page: pageNum
					})
					.then(res => {
						if (res.status == 200) {
							res.data.forEach(el => {
								el.icon = false;
							});
							this.mescroll.endByPage(
								res.data.length,
								Math.ceil(Number(res.data.length) / pageSize)
							);
							if (pageNum == 1) this.list = []; //如果是第一页需手动制空列表
							this.list = this.list.concat(res.data); //追加新数据
						}
					})
					.catch(err => {
						// 失败隐藏下拉加载状态
						this.mescroll.endErr();
					});
			},
			// 点击空布局按钮的回调
			emptyClick() {
				uni.switchTab({
					url: "/pages/tabBar/Home"
				});
			},
			getbacktel() {
				if (backindex == 2) {
					uni.switchTab({
						url: "/pages/tabBar/Cart"
					});
				} else {
					this.getback();
				}
			},
			showOptions: function(i) {
				if (this.showingIndex1 == i) return false;
				this.showingIndex1 = i;
				this.list = []; // 在这里手动置空列表,可显示加载中的请求进度
				this.mescroll.resetUpScroll(); // 刷新列表数据
				this.numberpay = false;
			},

			/**
			 * 取消订单
			 */
			cancellation(or_number) {
				this.$showModal({
					content: "确认取消订单吗？"
				}).then(res => {
					if (res.confirm) {
						iconarr = [];
						this.$loading();
						this.$http.getMyOrderquxiao({
							order_num: or_number
						}).then(res => {
							if (res.status == 200) {
								this.$toast(res.mess);
								this.list = [];
								this.mescroll.resetUpScroll();
							}
						});
					}
				});
			},

			orderInfo(typeIndex = 2, numarr) {

				let dataType = {
					zf_type: typeIndex,
					order_nums: numarr,
				};
				return new Promise(reslove => {
					this.$http.getzhifuorder(dataType).then(res => {
						if (res.status == 200) {
							reslove(res);
						} else {
							this.$toast(res.mess);
						}
					});
				});
			},
			getRequestmentInfo(order_number, zf_type) {
				return new Promise(reslove => {
					this.$http.getzhifu({
							order_number,
							zf_type,
							wechat_miniprogram: this.wechatMiniProgram,
							xcx_openid: uni.getStorageSync('xcxOpenid')
						})
						.then(res => {
							if (res.status == 200) {
								reslove(res.data);
							} else {
								this.$toast('支付失败')
							}
						});
				})

			},
			openPay(ordernumber, price) {
				this.totalPrice = price
				payOrderNumer = ordernumber
				this.$refs.payPop.payModel = true;
			},

			async crosspay() {
				this.$loading()
				this.$refs.payPop.payModel = false;
				const ref = this.$refs.payPop
				const {
					payType
				} = ref
				const orderInfo = await this.orderInfo(payType, payOrderNumer);
				ref.orderNumber = orderInfo.data.order_number
				if (payType == 5) {
					ref.bankModel = true
					return
				} else {
					const RequestmentInfo = await this.getRequestmentInfo(orderInfo.data.order_number, payType)
					ref.payinfos = RequestmentInfo.infos
					ref.crosspay()
				}

				this.$hideLoading()
			},


			hideAl() {
				this.valShow = false;
			},
			checkpay(id, orderNumber) {
				let moneyCount = 0;
				for (var i = 0; i < this.list.length; i++) {
					if (id == this.list[i].id) {
						this.list[i].icon = !this.list[i].icon;
						if (this.list[i].icon) {
							this.numberpay = true;
							if (!iconarr.includes(orderNumber)) {
								iconarr.push({
									orderNumber,
									price: this.list[i].total_price
								});

							}
						} else {
							iconarr.splice(i, 1);
						}
					}
				}
				if (iconarr.length == 0) {
					this.numberpay = false;
				}
				this.totalPrice = iconarr.map(res => +res.price).reduce((prev, curr) => (prev + curr))
			},
			hebingpay() {
				const arr = iconarr.map(res => res.orderNumber)
				this.openPay(arr, this.totalPrice)
			},
			/**
			 * 删除订单
			 */
			deleteOrder(order_number) {
				this.$showModal({
					content: '确认删除订单?'
				}).then(res => {
					if (res.confirm) {
						this.$loading();
						this.$http.getdelorder({
							order_num: order_number
						}).then(result => {
							if (result.status == 200) {
								this.$toast(result.mess);

								this.list = [];
								this.mescroll.resetUpScroll();
							}
						});
					}
				});
			},
			/**
			 * 确认收货
			 */
			getqrshouhuo(order) {
				this.$showModal({
					content: '确认收到货了吗?'
				}).then(res => {
					if (res.confirm) {
						this.$loading();
						this.$http.getqrshouhuo({
							order_num: order
						}).then(result => {
							if (result.status == 200) {
								this.$toast(result.mess);

								this.list = [];
								this.mescroll.resetUpScroll();
							}
						});
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	page,
	.index_class {
		height: 100%;
	}

	.shou_sure {
		span {
			display: block;
			width: 100upx;
			height: 40upx;
			line-height: 40upx;
			border-radius: 20upx;
			border: 1upx solid #999;
			color: #999;
			text-align: center;
			font-size: 24upx;
		}
	}

	.padding-btn {
		padding-bottom: 80upx;
	}

	.mescroll-uni.mescroll-uni-fixed {
		top: 96upx !important;
	}

	.to_comment {
		width: 100upx !important;
		margin-left: 0 !important;
	}

	.paybtn {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 20upx;
	}

	.all-order {
		padding-top: 88upx;

		.order_list {
			margin-bottom: 20upx;
			background-color: #fff;

			.order_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20upx 30upx;
				border-bottom: 1upx solid #f4f4f4;
				color: #333;
			}
		}

		.order-all-text {
			text-align: right;
			font-size: 24upx;
			color: #333;
			margin-top: 15upx;
		}
	}
</style>
